<template>
  <scroll-view
    scroll-x="true"
    class="tab-scroll-view"
    style="background-color: white"
  >
    <view
      v-for="(item, index) in day_info"
      :key="index"
      class="tab-item"
      :style="{borderBottom: '2px solid ' + (item.active === 1 ? theme.color : 'white'), color: item.active === 1 ? theme.color : '#555'}"
      @click='sel_day(index)'
    >
      <view>{{item.week}}</view>
      <view>{{item.day}}</view>
    </view>
  </scroll-view>
</template>

<script>
import { queryTheme } from '@/widget/api/theme/common'

export default {
  props: {
    startMode: {
      type: String,
      default: '0'
    },
    startDay: {
      type: Number,
      default: 0
    },
    maxDay: {
      type: Number,
      default: 30
    }
  },
  data() {
    return {
      theme: {},
      day_info: []
    }
  },
  created() {
    queryTheme().then(res => {
      this.theme = res.data.theme
    })
    this.initDayInfo()
  },
  watch: {
    startMode(n, o) {
      this.initDayInfo()
    }
  },
  methods: {
    initDayInfo() {
      var day_info = [];
      var today = new Date();
      var curTimestamp = new Date(today.toDateString()).getTime();
      if(this.startMode === '1') {
        curTimestamp = curTimestamp - 24*60*60*1000
      } else if (this.startMode === '2') {
        curTimestamp = curTimestamp + this.startDay*24*60*60*1000
      }
      var week = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
      for (var i = 0; i < this.maxDay; i++) {
        var curDate = new Date(curTimestamp);
        var item = {};
        item['day'] = (curDate.getMonth() + 1) + '月' + curDate.getDate() + '日';
        item['week'] = week[curDate.getDay()];
        item['date'] = curDate.getFullYear() + '-' + (curDate.getMonth() + 1) + '-' + curDate.getDate();
        if (this.day === '') {
          if (i === 0) {
            item['active'] = 1
            this.day = item['date']
          } else {
            item['active'] = 0
          }
        } else {
          if (item['date'] === this.day) {
            item['active'] = 1
          } else {
            item['active'] = 0
          }
        }
        day_info.push(item);
        curTimestamp = curTimestamp + 24 * 60 * 60 * 1000;
      }
      this.day_info = day_info
      if (this.day_info.length > 0) {
        this.sel_day(0)
      }
    },
    sel_day(index) {
      this.day = this.day_info[index].date
      for (var i = 0; i < this.day_info.length; i++) {
        this.$set(this.day_info[i], 'active', 0)
      }
      this.$set(this.day_info[index], 'active', 1)
      this.$emit("dayChange", { day: this.day })
    }
  }
}
</script>

<style>
.tab-scroll-view {
  width: 750upx;
  height: 48px;
  flex-direction: row;
  white-space: nowrap;
}
.tab-item {
  display: inline-block;
  width: 100px;
  height: 46px;
  font-size: 16px;
  text-align: center;
  color: #555;
  border-bottom: 2px white solid;
}
.day-active {
  color: red;
  border-bottom: 2px red solid;
}
</style>